<template>
  <div>
    <div class="title">
      <button @click="back" class="back"><img src="@/assets/svg/左1_left-two.svg"></button>
      {{$route.query.category}}
    </div>
    <div class="container">
      <div class="list">
        <div class="item" v-for="(item) in articleList" :key="item.id">
          <img src="@/assets/img/book2.png" alt="图片正在赶路" @click="toOverview(item.id)">
          <h1>{{ item.title.length >= 10 ?  item.title.substring(0,10) + "..." :item.title }}</h1>
          <div class="menu">
            <span class="like">喜欢</span>
            <span class="gongDe">功德</span>
          </div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>
import {findArticleListByCategoryIdApi} from "@/api/article";

export default {
  name: "",
  data() {
    return {
      articleList: []
    }
  },
  methods: {
    back() {
      this.$router.back();
    },
    // 去概览页
    toOverview(id){
      this.$router.push({
        path:'/library/overview',
        query: {
          id: id
        }
      })
    },
    // 根据分类id查询全部文章列表
    selectAllArticle(id){
      findArticleListByCategoryIdApi(id).then((res) => {
        this.articleList = res.data;
      })
    }

  },
  created() {
    this.selectAllArticle(this.$route.query.category)
  }
}
</script>

<style scoped lang="scss">
// 标签
.title {
  text-align: center;
  font-size: 30px;
  margin: 30px 0;

}
// 回退
.back {
  cursor: pointer;
  position: relative;
  left: -600px;
  top: 30px;
}
// 图书列表
.container {
  background-color: white;
}
.list {
  width: 1200px;
  margin: 0 auto;
  .item {
    float: left;
    margin: 25px;
    img {
      width: 145px;
      height: 225px;
      transition: 0.3s linear all;
      cursor: pointer;
    }
    img:hover {
      transform: scale(1.05);
    }
    h1 {
      margin-top: 5px;
      font-size: 14px;
    }
    .menu span {
      margin-right: 5px;
      cursor: pointer;
      user-select: none;
    }
    .menu::after {
      display: block;
      content: '';
      clear: both;
    }
    .like {
      float: left;
    }
    .gongDe{
      float: left;

    }
  }
}
.list::after {
  display: block;
  content: '';
  clear: both;
}
</style>